<template>
    <view class="container">
        <view class="fixed">
            <search to="/pages/langwen/search"></search>
            <view class="tab-container">
                <view v-for="(item, index) in lev2Data"
                :key="index"
                :class="lev2Index === index ? 'tab tab-checked' : 'tab'"
                @tap="lev2Index = index"
                >{{ item.name }}
                </view>
            </view>
        </view>
        <view class="slide-container" v-show="lev3Data">
            <view class="item" v-for="(item,index) in lev3Data" :key="index" @tap="lev3IndexHandle(index)">
                <view class="img">
                    <image :src="item.labelPicUrl" mode=""></image>
                </view>
                <view :class="lev3Index.indexOf(index) !== -1 ? 'name name-checked' : 'name'">
                    {{ item.labelName }}
                </view>
            </view>
        </view>
        <filters ref="filters"></filters>
    </view>
</template>

<script>
import Api from '@/common/api';
import search from '../../components/langwen/search.vue';
import filters from '../../components/langwen/filter.vue';
export default {
	name: 'sort2',
    data() {
        return {
            lev1Id: '',
			lev1Title: '',
            lev2Data: [],
            lev3Data: [],
			lev1Index: '',
            lev2Index: '',
			lev3Index: [],
			param: '',
			lev2Count: 0,
			categoryId: '',
			categoryId3: []
        };
    },
	// 下拉刷新回调函数
	onPullDownRefresh() {
		this.$refs.filters.getListData('headerRefreshing');
		uni.stopPullDownRefresh();
	},
	// 上拉加载
	onReachBottom() {
		this.$refs.filters.getListData('load');
	},
    components: {
        search,
        filters
    },
    onLoad(option) {
		this.param = JSON.parse(option.param);
		this.lev1Id = this.param.lev1Id;
		uni.setNavigationBarTitle({
		    title: this.param.lev1Title
		});
    },
    created() {
        this.getLev2Data();
    },
	watch: {
		lev2Index() {
			this.categoryId3 = [];
			if(this.lev2Index === 0) {
				this.lev3Data = '';
				this.lev3Index = [];
			} else {
				if(this.lev2Count === 0) {
					this.lev3Index.push(this.param.lev3);
				} else {
					this.lev3Index = [];
				};
				this.getLev3Data();
			}
		},
		categoryId3() {
			this.$refs.filters.categoryLevel = this.lev2Index === 0 ? 1 : 2;
			this.$refs.filters.categoryId = this.lev2Index === 0 ? this.lev1Id : this.lev2Data[this.lev2Index].id;
			this.$refs.filters.categoryId3 = this.categoryId3;
			this.$refs.filters.getListData('headerRefreshing');
		}
	},
    methods: {
        // 二级分类
        async getLev2Data() {
            var params = {
                'topCategoryId': this.lev1Id
            };
            var data = await Api.apiCall('get', Api.sort.findLev2Sort, params);
            data.unshift({
                name: '全部'
            });
            this.lev2Data = data;
			this.lev2Index = this.param.lev2;
        },
		// 三级分类
		getLev3Data() {
			this.lev3Data = this.lev2Data[this.lev2Index].cateLabelList;
			if(this.lev3Data.length === 0) {
				this.lev3Data = '';
			}
			if(this.lev2Count === 0) {
				this.categoryId3.push(String(this.lev3Data[this.param.lev3].id));
			}
			this.lev2Count++;
		},
		lev3IndexHandle(index) {
			let lev3Index = this.lev3Index;
			let result = lev3Index.indexOf(index);
			if(result !== -1) {
				lev3Index.splice(result, 1);
				this.categoryId3.splice(result, 1);
			} else {
				lev3Index.push(index);
				this.categoryId3.push(String(this.lev3Data[index].id));
			};
		}
    }
};
</script>

<style lang="less">
page {
    background: rgba(245, 245, 245, 1);
}

.container {
    padding-top: 170rpx;
}

.fixed {
    z-index: 999;
    position: fixed;
    top: 40px;
    width: 100%;
}

.tab-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    height: 80rpx;
    background: rgba(90, 194, 255, 1);
    overflow-x: auto;
    .tab {
        width: fit-content;
        padding: 0 25rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        white-space: nowrap;
    }
    .tab-checked {
        position: relative;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        &::after {
            content: '';
            position: absolute;
            bottom: -14rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background: rgba(255, 255, 255, 1);
            border-radius: 2rpx;
        }
    }
}

.slide-container {
	display: flex;
    align-items: center;
	height: 200rpx;
	overflow-x: auto;
	background:rgba(255,255,255,1);
	.item {
		padding: 0 30rpx;
		.img {
			width: 72rpx;
			height: 96rpx;
			margin: 0 auto 14rpx auto;
		}
		.name {
            text-align: center;
			font-size: 22rpx;
			font-weight:400;
			color:rgba(191,191,191,1);
			white-space: nowrap;
		}
		.name-checked {
			font-size:22rpx;
			font-weight:400;
			color:rgba(90,194,255,1);
		}
	}
}
</style>
